<template>
	<view class="detail">
		<view class="title">{{detail.title}}</view>
		<view class="info">
			<view class="author">
				编辑：{{detail.author}}
			</view>
			<view class="time">
				发布日期：{{detail.posttime}}
			</view>
		</view>
		<view class="content">
			<rich-text :nodes="detail.content">
			</rich-text> <!--解析富文本渲染,如果用v-html的话无法修改样式-->
		</view>
		<view class="description">
			声明：本站内容均采集自腾讯新闻，如有侵权请联系作者进行整改删除，感谢您的支持。
		</view>
	</view>
</template>

<script>
	import {parseTime} from '@/utils/tools.js'
	export default {
		data() {
			return {
				options:null,
				detail:{} ,//详情页内容对象
			}
		},
		onLoad(e) {  //接受页面传来的数据
			console.log(e)
			this.options = e
			this.getDetail()
		},
		methods: {
			//详情页内容接口请求
			getDetail(){  
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/detail.php",
					data:this.options,
					success:res=>{
						console.log(res)
						res.data.posttime = parseTime(res.data.posttime)  //时间戳格式转化
						res.data.content=res.data.content.replace(/<img/gi,'<img style="max-width:100%"') //正则处理小程序图片尺寸
						this.detail = res.data
						
						this.saveHistory() //存储历史记录
						uni.setNavigationBarTitle({ //导航标题修改
							title:this.detail.title
						})
					}
				})
			},
			saveHistory(){
				//存储历史记录到缓存
				
				let historyArr = uni.getStorageSync("historyArr") || [] //判断是否已经有historyArr防止覆盖上一个记录
				let item = {  //存储的数据对象
					id:this.detail.id,
					classid:this.detail.classid,
					picurl:this.detail.picurl,
					looktime:parseTime(Math.round(new Date().getTime()/1000).toString()),//10位时间戳
					title:this.detail.title
				}
				
				let index = historyArr.findIndex(it=>{ //循环遍历且仅返回索引值
					return it.id == this.detail.id
				})
				if(index>=0){  //说明缓存中已经存有数组
					historyArr.splice(index,1) //如果已经存有数据则删除原数据刷新数据
				}
				
				historyArr.unshift(item) //追加新对象进数组
				historyArr = historyArr.slice(0,10)  //截取前十条记录展示
				uni.setStorageSync("historyArr",historyArr)
			}
		}
	}
</script>

<style lang="scss">
.detail{
	padding: 30rpx;
	.title{
		font-size: 46rpx;
		color: #333;
	}
	.info{
		background: #f6f6f6;
		padding:20rpx 20rpx;
		font-size: 25rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0;
	}
	.content{
		padding-bottom: 50rpx;
		/*/deep/ img{  //只支持h5
			max-width: 100%;
		}*/
	}
	.description{
		background: #fef0f0;
		font-size: 26rpx;
		padding: 20rpx;
		color: #f89898;
		line-height: 1.8em;
	}
}
</style>
